<template>
  <div class="notice_box">
    <p>
      <img src="@/assets/imgs/2.png" />
    </p>
    <p>
      <img src="@/assets/imgs/3.png" />
    </p>
    <div class="notice_list">
      <p class="notice_list_hd">填写下面信息，免费获取资料</p>
      <p class="notice_list_text">姓名(信息已加密，请放心填写)*</p>
      <md-field>
        <md-input-item placeholder="请输入姓名" align="left" v-model="noticeName"></md-input-item>
      </md-field>
      <p class="notice_list_text">电话(方便我们为您发送资料)*</p>
      <md-field>
        <md-input-item placeholder="请输入电话" align="left" v-model="noticePhone" maxlength="11"></md-input-item>
      </md-field>
      <p class="notice_list_text">城市(请选择您要加盟开通的意向城市)*</p>
      <p class="notice_list_city" @click="chooseCityBtn">
        {{noticeCityName}}
        <span>
          <img src="@/assets/imgs/arrow_right.png" />
        </span>
      </p>
      <p class="notice_list_text">
        线路
        (请填写您意向开通的城市。例如：上高-南昌，
        多个请用逗号隔开)
        *
      </p>
      <md-field>
        <md-input-item placeholder="请输入线路" align="left" v-model="cityLine"></md-input-item>
      </md-field>
      <p class="notice_btn" @click="noticeBtn">立即提交获取资料</p>
    </div>
    <md-popup v-model="isPopupShow" position="bottom">
      <md-popup-title-bar title="选择省市区/县" ok-text="确认" cancel-text="取消" @confirm="getregion()" @cancel="hidePopUp()"></md-popup-title-bar>
      <div class="pop_box">
        <div class="pop_box_hd">
          <ul>
            <li @click="provinceBtn">
              <p>{{provinceName}}</p>
              <span>
                <img src="@/assets/imgs/sanjiao.png" />
              </span>
            </li>
            <li @click="cityBtn">
              <p>{{cityName}}</p>
              <span>
                <img src="@/assets/imgs/sanjiao.png" />
              </span>
            </li>
            <li @click="countyBtn">
              <p>{{countyName}}</p>
              <span>
                <img src="@/assets/imgs/sanjiao.png" />
              </span>
            </li>
          </ul>
        </div>
        <div class="city_list" v-show="Isprovince">
          <ul>
            <li v-for="(item, index) in provinceData" :key="index" @click="getprovince(item.name,item.adcode)">{{item.name}}</li>
          </ul>
        </div>
        <div class="city_list" v-show="Iscity">
          <ul>
            <li v-for="(item, index) in cityData" :key="index" @click="getcity(item.name,item.adcode)">{{item.name}}</li>
          </ul>
        </div>
        <div class="city_list" v-show="Iscounty">
          <ul>
            <li v-for="(item, index) in countyData" :key="index" @click="getcounty(item.name,item.adcode,index)" :class="{active:Isactive==index}">{{item.name}}</li>
          </ul>
        </div>
      </div>
    </md-popup>
  </div>
</template>
<script>
import { Field, InputItem, FieldItem, Icon, Button, Toast, Dialog, Popup, PopupTitleBar } from 'mand-mobile';
import Loading from '@/components/loading';
import http from '@/common/http';
import { encryptByDESModeEBC, decryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
export default {
  name: 'notice',
  data() {
    return {
      noticeName: '',
      noticePhone: '',
      noticeCityName: '请选择',
      noticeCityNameOne: '请选择',
      cityLine: '',
      isPopupShow: false,
      Isprovince: true,
      Iscity: false,
      provinceData: [],
      cityData: [],
      countyData: [],
      Iscounty: false,
      provinceName: '省',
      cityName: '市',
      countyName: '区/县',
      provinceCode: '',
      cityCode: '',
      countyCode: '',
      districtSearch: null,
      Isactive: '',
      source: ''
    };
  },
  components: {
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar
  },
  mounted() {
    this.AMPDistrictSearch('中国');
    if (Utils.isApp()) {
      this.source = '2';
    } else {
      this.source = '3';
    }
  },
  methods: {
    AMPDistrictSearch(type) {
      AMap.plugin('AMap.DistrictSearch', () => {
        this.districtSearch = new AMap.DistrictSearch({
          // 关键字对应的行政区级别，country表示国家
          level: 'country',
          //  显示下级行政区级数，1表示返回下一级行政区
          subdistrict: 1
        });
        // 搜索所有省/直辖市信息
        this.districtSearch.search(type, (status, result) => {
          console.log(result);
          if (result.districtList[0].level === 'country') {
            this.provinceData = result.districtList[0].districtList;
          } else if (result.districtList[0].level === 'province') {
            this.cityData = result.districtList[0].districtList;
          } else if (result.districtList[0].level === 'city') {
            this.countyData = result.districtList[0].districtList;
            // this.countyName = this.countyData[0].name;
            // this.countyCode = this.countyData[0].adcode;
          }
        });
      });
    },
    // 拉起选择省市区/县
    chooseCityBtn() {
      this.isPopupShow = true;
      this.Isprovince = true;
      this.Iscity = false;
      this.Iscounty = false;
    },
    // 选择省
    provinceBtn() {
      this.Isprovince = true;
      this.Iscity = false;
      this.Iscounty = false;
    },
    getprovince(name, provinceCode) {
      this.provinceName = name;
      this.provinceCode = provinceCode;
      this.Isprovince = false;
      this.Iscity = true;
      this.cityName = '市';
      this.countyName = '区/县';
      this.cityData = [];
      this.countyData = [];
      this.cityCode = '';
      this.countyCode = '';
      this.AMPDistrictSearch(provinceCode);
    },
    // 选择市
    cityBtn() {
      if (this.cityData.length === 0) {
        Toast({
          content: '请选择省',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      this.Isprovince = false;
      this.Iscity = true;
      this.Iscounty = false;
    },
    // 获取市
    getcity(name, cityCode) {
      this.cityName = name;
      this.cityCode = cityCode;
      this.Iscity = false;
      this.Iscounty = true;
      this.countyName = '区/县';
      this.countyData = [];
      this.countyCode = '';
      this.Isactive = '';
      this.AMPDistrictSearch(cityCode);
    },
    // 选择区县
    countyBtn() {
      if (this.countyData.length === 0) {
        Toast({
          content: '请选择市',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      this.Isprovince = false;
      this.Iscity = false;
      this.Iscounty = true;
    },
    // 获取区县
    getcounty(name, countyCode, index) {
      this.countyName = name;
      this.countyCode = countyCode;
      this.Isactive = index;
    },
    getregion() {
      if (this.cityName === '市') {
        Toast({
          content: '请选择市',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      var provinceName = this.provinceName;
      var cityName = this.cityName;
      var countyName = this.countyName;
      this.noticeCityNameOne = this.provinceName + this.cityName + this.countyName;
      this.noticeCityName = provinceName.substring(0, 5) + ' ' + cityName.substring(0, 5) + ' ' + countyName.substring(0, 5);
      var province = 'province' + '_' + this.provinceName + '_' + this.provinceCode;
      var city = 'city' + '_' + this.cityName + '_' + this.cityCode;
      var country = '';
      if (this.countyName === '区/县') {
        country = '';
        this.noticeCityName = provinceName.substring(0, 5) + ' ' + cityName.substring(0, 5);
        this.noticeCityNameOne = this.provinceName + this.cityName;
      } else {
        country = 'district' + '_' + this.countyName + '_' + this.countyCode;
      }
      this.isPopupShow = false;
    },
    hidePopUp() {
      this.isPopupShow = false;
    },
    noticeBtn() {
      var regphone = /^1[23456789]\d{9}$/;
      if (!this.noticeName) {
        Toast({
          content: '请输入姓名',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (
        /[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g.test(
          this.noticeName
        )
      ) {
        Toast({
          content: '不能输入表情',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.noticePhone) {
        Toast({
          content: '请输入手机号',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!regphone.test(this.noticePhone)) {
        Toast({
          content: '手机号格式错误',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (this.noticeCityNameOne === '请选择') {
        Toast({
          content: '请选择城市',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.cityLine) {
        Toast({
          content: '请输入线路',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (
        /[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g.test(
          this.cityLine
        )
      ) {
        Toast({
          content: '不能输入表情',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      var params = {
        userName: this.noticeName,
        userPhone: this.noticePhone,
        intentionCity: this.noticeCityNameOne,
        intentionRoute: this.cityLine,
        userSource: this.source
      };
      Loading.show();
      http.post('pakj/investment/insertInvestment', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          this.noticeName = '';
          this.noticePhone = '';
          this.noticeCityNameOne = '请选择';
          this.noticeCityName = '请选择';
          this.cityLine = '';
          Dialog.alert({
            title: '提示',
            content: '提交成功',
            confirmText: '确定'
          });
        } else {
          Dialog.alert({
            title: '提示',
            content: '提交失败',
            confirmText: '确定'
          });
        }
      });
    }
  }
};
</script>
<style lang="stylus">
p {
  margin-bottom: 0px;
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.notice_box {
  background-color: #1a132c;
  padding-bottom: 40px;
}

.notice_box p img {
  display: block;
  width: 100%;
}

.notice_list {
  background-color: #fff;
  margin: 20px 35px 0px 35px;
  padding-bottom: 20px;
}

.notice_list_hd {
  color: #D74262;
  height: 90px;
  line-height: 90px;
  font-size: 34px;
  text-align: center;
  border-bottom: solid 1px #eee;
  font-weight: 600;
}

.notice_list_text {
  font-size: 26px;
  color: #666;
  padding: 20px 30px 0px 30px;
}

.notice_list_city {
  height: 88px;
  line-height: 88px;
  font-size: 28px;
  padding: 0px 30px;
  border-bottom: solid 1px #eee;
}

.notice_list_city span {
  float: right;
}

.notice_list_city span img {
  width: 20px;
  position: relative;
  top: 35px;
}

.notice_btn {
  font-size: 36px;
  color: #fff;
  text-align: center;
  height: 98px;
  line-height: 98px;
  background-color: #D74262;
  border-radius: 7px;
  margin: 10px 30px;
}

.pop_box {
  background-color: #fff;
  height: 700px;
}

.pop_box_hd {
  border-top: solid 1px #EFEFEF;
  height: 80px;
  border-bottom: solid 1px #EFEFEF;
}

.pop_box_hd ul li {
  width: 33.33%;
  float: left;
  font-size: 28px;
  color: #333;
  list-style: none;
  line-height: 80px;
  position: relative;
}

.pop_box_hd ul li p {
  margin-left: 40px;
  width: 210px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pop_box_hd ul li span {
  position: absolute;
  top: 8px;
  right: 10px;
}

.pop_box_hd ul li img {
  width: 30px;
}

.city_list {
  height: 560px;
  width: 100vw;
  overflow: hidden;
  overflow-y: auto;
}

.city_list ul li {
  border-bottom: solid 1px #EFEFEF;
  height: 80px;
  line-height: 80px;
  padding: 0px 40px;
  font-size: 28px;
  color: #333;
}

.city_list ul li.active {
  color: #ff6917;
}
</style>